<template>
  <div class="home">
    <div v-if="$route.path == '/home'">
      <search></search>
      <swiper :banner="banner"></swiper>
      <my-nav-bar :channel="channel"></my-nav-bar>
      <brand :brandList="brandList"></brand>
      <new-good :newGoodsList="newGoodsList"></new-good>
      <hot-good-recommend :hotGoodsList="hotGoodsList"></hot-good-recommend>
      <topicSelect :topicList="topicList"></topicSelect>
      <home-category-list :categoryList="categoryList"></home-category-list>
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
    <transition name="slide">
      <router-view v-if="$route.path == '/home/popup'"></router-view>
    </transition>
  </div>
</template>

<script>
import search from "@/components/home/search.vue";
import swiper from "@/components/swiper/swiper.vue";
import MyNavBar from "@/components/home/MyNavBar.vue";
import brand from "@/components/home/brand.vue";
import newGood from "@/components/home/newGood.vue";
import hotGoodRecommend from "@/components/home/hotGoodRecommend.vue";
import topicSelect from "@/components/home/topicSelect.vue";
import HomeCategoryList from "@/components/common/HomeCategoryList.vue";
import { getHomeData } from "@/request/api.js";
export default {
  name: "Home",
  components: {
    swiper,
    search,
    MyNavBar,
    brand,
    newGood,
    hotGoodRecommend,
    topicSelect,
    HomeCategoryList,
  },
  data() {
    return {
      //；轮播图
      banner: [],
      channel: [],
      //品牌制造商
      brandList: [],
      //新品首发
      newGoodsList: [],
      //人气推荐
      hotGoodsList: [],
      //专题精选
      topicList: [],
      //分类列表
      categoryList: [],
    };
  },
  created() {
    //获取首页数据
    getHomeData().then((res) => {
      if (res.errno == 0) {
        //成功获取准确数据
        console.log(res.data);
        this.banner = res.data.banner;
        this.channel = res.data.channel;
        this.brandList = res.data.brandList;
        this.newGoodsList = res.data.newGoodsList;
        this.hotGoodsList = res.data.hotGoodsList;
        this.topicList = res.data.topicList;
        this.categoryList = res.data.categoryList;
      }
    });
  },
};
</script>
<style lang="less" scoped>
// 设置popup层进场动画，进场前，中，后
//   离场效果也是一样，只是离场的初始位置是进场的结束位置
.slide-enter,
.slide-leave-to {
  // 开始的位置
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: right 0.5s linear;
}
.slide-enter-to,
.slide-leave {
  // right 0 表示进场完成，弹出层完成覆盖home界面
  right: 0;
}
</style>